import { HTMLAttributes, createElement, type FC } from 'react';
import classNames from 'classnames';

import { emojiDefaultProps } from './defaultProps';
import type { EmojiOptions } from './type';

export interface EmojiProps extends EmojiOptions, HTMLAttributes<HTMLElement> {}

const Emoji: FC<EmojiProps> = (props) => {
  const { className, name, disabled, loading, size, link, forwardedRef, ...emojiProps } = props;

  return createElement('em', {
    ref: forwardedRef,
    'data-emoji': name,
    className: classNames({ disabled, loading, link }, size, className),
    ...emojiProps,
  });
};

Emoji.displayName = 'Emoji';
Emoji.defaultProps = emojiDefaultProps;

export default Emoji;
